<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/res/back/css/base.css" rel="stylesheet" type="text/css"/>
    <link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body {
            padding: 10px;
        }

        ::-webkit-scrollbar{width: 10px; height: 10px;}
        ::-webkit-scrollbar-button:vertical{display: none;}
        ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
        ::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
        ::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
        ::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div class="panel panel-info panel-content" id="app">

    <div class="panel-heading" style="margin-bottom: 5px;">
        <button type="button" class="btn btn-info" @click="showEditWin()">
            <span class="glyphicon glyphicon-plus"></span>&nbsp;新增
        </button>
    </div>

    <table class="table table-hover table-bordered table-striped table-condensed" v-cloak>
        <thead>
        <tr>
            <th width="70px">序号</th>
            <th>名称</th>
            <th>图片</th>
            <th>链接</th>
            <th width="120px">操作</th>
        </tr>
        </thead>
        <tr v-for="ad in adList">
            <td align="center">{{ ad.seq }}</td>
            <td align="center">{{ ad.imgName }}</td>
            <td align="center">
                <img :src="ad.contentPath" style="max-width: 100px; max-height: 100px;"> | <img :src="ad.bgPath" style="max-width: 100px; max-height: 100px;">
            </td>
            <td align="center">{{ ad.url }}</td>
            <td>
                <button type="button" class="btn btn-info btn-xs" @click="showEditWin(ad)">编辑</button>
                <button type="button" class="btn btn-info btn-xs" @click="unable(ad)">停用</button>
            </td>
        </tr>
    </table>

    <div id="editWin" style="display: none;">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-4 control-label">名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model.trim="ad.imgName">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">链接</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model.trim="ad.url">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">背景图</label>
                <div class="col-sm-8">
                    <button onclick="upload(1)" type="button" class="btn btn-info">上传图片</button>
                    <img style="margin-top: 5px; max-width: 100px; max-height: 100px;" :src="ad.bgPath" @click="viewPic(ad.bgPath)">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">内容图</label>
                <div class="col-sm-8">
                    <button onclick="upload(2)" type="button" class="btn btn-info">上传图片</button>
                    <button onclick="Vue.set(app.ad, 'contentPath', 'http://img2.zht360.com/aztV2/admin/20170324/1490347111191069536.png');" type="button" class="btn btn-primary" style="margin-left: 0">透明图</button>
                    <img style="margin-top: 5px; max-width: 100px; max-height: 100px;" :src="ad.contentPath" @click="viewPic(ad.contentPath)">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">序号</label>
                <div class="col-sm-8">
                    <input type="number" class="form-control" v-model.number="ad.seq">
                </div>
            </div>
            <div class="form-group" style="margin-top: 10px;">
                <div class="col-sm-offset-6">
                    <input type="button" class="btn btn-default" value="提交" @click="saveAd()">
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/bootstrap3/jsone/bootstrap.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/layer/layer.js" type="text/javascript"></script>
<script src="/res/common/js/util.js" type="text/javascript"></script>
<script src="/res/common/js/vue.js" type="text/javascript"></script>

<script type="text/javascript">
    var dialog;
    var app = new Vue({
        el: '#app',
        data: {
            adId : 0,           //广告位ID
            adList : [],        //广告列表
            ad : {}             //编辑的广告
        },
        mounted: function () {
            this.searchIndexAd();
        },
        methods: {
            searchIndexAd : function() {
                layer.ready(function() {
                    $.ajax({
                        url : '/advertise/searchIndexAd.do',
                        type : 'post',
                        dataType : 'json',
                        beforeSend : function() {
                            layer.load(2, {shade: 0.1});
                        },
                        success : function(res) {
                            if(res && res.success) {
                                app.adList = res.obj.list;
                                app.adId = res.obj.adId;
                            } else {
                                layer.msg("获取列表失败");
                            }
                        },
                        complete : function() {
                            layer.closeAll('loading');
                        }
                    });
                });
            },
            showEditWin : function(editAd) {
                if(editAd) {
                    this.ad = JSON.parse(JSON.stringify(editAd));
                } else {
                    //设置adId
                    this.ad = {adId : this.adId};
                }
                dialog = art.dialog({
                    title: '编辑广告',
                    lock : true,
                    width : '500px',
                    opacity : 0.3,
                    content: document.getElementById('editWin')
                });
            },
            saveAd : function() {
                $.ajax({
                    url : '/advertise/saveIndexAd.do',
                    type : 'post',
                    dataType : 'json',
                    data : this.ad,
                    beforeSend : function() {
                        layer.load(2, {shade: 0.1});
                    },
                    success : function(res) {
                        if(res && res.success) {
                            layer.msg("操作成功");
                            app.searchIndexAd();
                            dialog.close();
                        }
                    },
                    complete : function() {
                        layer.closeAll('loading');
                    }
                });
            },
            unable : function(editAd) {
                $.ajax({
                    url : '/advertise/unable.do',
                    type : 'post',
                    dataType : 'json',
                    data : editAd,
                    beforeSend : function() {
                        layer.load(2, {shade: 0.1});
                    },
                    success : function(res) {
                        if(res && res.success) {
                            layer.msg("操作成功");
                            app.searchIndexAd();
                        }
                    },
                    complete : function() {
                        layer.closeAll('loading');
                    }
                });
            },
            viewPic : function(src) {
                parent.window.open(src);
            }
        }
    });

    var uploadDialog;
    function upload(type) {
        if(type == 1) {
            uploadDialog = art.dialog.uploadFile("背景图", {
                callback : "uploadBgCallBack",
                userpath : "admin",
                extensions : "gif,jpg,png,jepg"
            });
        } else {
            uploadDialog = art.dialog.uploadFile("内容图", {
                callback : "uploadContentCallBack",
                userpath : "admin",
                extensions : "gif,jpg,png,jepg"
            });
        }
    }

    function uploadBgCallBack(response) {
        uploadDialog.close();
        Vue.set(app.ad, 'bgPath', response.url);
    }

    function uploadContentCallBack(response) {
        uploadDialog.close();
        Vue.set(app.ad, 'contentPath', response.url);
    }
</script>
</body>
</html>